<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
    <p v-for="(num,i) in arr" ref="one" :key="i">{{num}}</p>
</div>
</body>
<script>
    // ref与v-for在同一个标签上使用，那么通过this.$refs.属性值获取到的是一个数组，数组的元素为真实DOM
	new Vue({
		el:"#root",
        data:{
			arr:[1,2,3,4,5,6,7,8,9]
        },
        mounted(){
			const {one} = this.$refs;
			one.forEach((el,index)=>{
				if(index%2){
					el.style.background = "pink"
                }else el.style.background = "green"
            })
			// one[1].style.background = "green";
			// console.log(this.$refs)
            // this.$refs.one[1].style.background = "yellow";
        }
	})
</script>
</html>